import main from "./index";
import { Gete, Newe } from "./utils";
import { IData } from "./models";

export default class {
  FileName = "";
  FileNameData: string[] = [];
  private dom: HTMLDivElement;
  
  constructor() {
    this.dom = Gete("fileList") as HTMLDivElement;
    this.dom.onkeydown = ({ key }) => {
      if (key === "Delete") this.del(this.FileName);
    };
  }
  
  private getFileItem(filename: string) {
    const { children } = this.dom;
    let fileItem: HTMLDivElement;
    for (let i = 0; i < children.length; i += 1) {
      fileItem = children[i] as HTMLDivElement;
      if (fileItem.lang === filename) break;
    }
    return fileItem;
  }
  
  Add(filename: string) {
    const fileItem = Newe({ para: { lang: filename }});
    const info = Newe({ para: { onclick: (e: MouseEvent) => {
      const dom = e.target as HTMLDivElement;
      this.SetCurrent(dom.parentElement.parentElement.lang);
    }}});
    const name = Newe({ textContent: filename });
    const { palette } = main.Canvas.Data[filename] as IData;
    const textContent = "颜色种数：" + palette.length.toString();
    const colorNum = Newe({ textContent });
    const delIcon = Newe({
      type: "i", // 图标字体 iconfont
      textContent: "", // 编号：&#xe703;
      para: { onclick: (e: MouseEvent) => {
        const i = e.target as HTMLElement;
        this.del(i.parentElement.lang);
      }},
    });
    info.append(name, colorNum);
    fileItem.append(info, delIcon);
    this.dom.append(fileItem);
    this.FileNameData.push(filename);
  }
  
  private del(filename: string) {
    const { FileName, FileNameData } = this;
    const fileIndex = FileNameData.indexOf(filename);
    FileNameData.splice(fileIndex, 1);
    this.getFileItem(filename).remove();
    
    if (filename === FileName && FileNameData.length)
      this.SetCurrent(FileNameData[0]);
    
    delete main.Canvas.Data[filename];
    
    if (!FileNameData.length) {
      // 这下完了
      this.FileName = "";
      main.Marker.Clear();
      main.ObjList.Clear();
      main.Output.Update();
      main.Canvas.SetCanvasSize();

      main.Toolbar.Zoomin.disabled = true;
      main.Toolbar.Zoomout.disabled = true;
      main.Toolbar.CutBtn.disabled = true;
      main.Toolbar.PickBtn.disabled = true;
      main.Canvas.ShowCut = false;
    }
    main.Feedback.Update();
  }
  
  SetCurrent(filename: string) {
    const fileItem = this.getFileItem(filename);
    if (fileItem.className === "fileItemCurrent") return; // 忽略重复点击
    
    const before = this.getFileItem(this.FileName);
    before.removeAttribute("class"); // 恢复之前
    fileItem.className = "fileItemCurrent"; // 设置当前
    this.FileName = filename;
    
    main.Canvas.Update();
    main.Marker.Refresh();
    main.ObjList.Update();
    main.Output.Update();
    main.Canvas.SetTestCanvas();
  }
  
  Update() {
    const { FileNameData, dom } = this;
    const { children } = dom;
    const { Data } = main.Canvas;
    for (let i = 0; i < children.length; i += 1) {
      const filename = FileNameData[i];
      const fileItem = children[i];
      const { palette } = Data[filename] as IData;
      const colorNum = fileItem.children[0].children[1];
      colorNum.textContent = "颜色种数：" + palette.length.toString();
    }
  }
};
